<template>
	<view class="detail">
		<navBar title="订单详情"></navBar>

		<view class="content">
			<view class="table">
				<view class="th flex_center">
					<view class="border">带货达人</view>
					<view class="border">曝光</view>
					<view class="border">成交(单)</view>
					<view>佣金(元)</view>
				</view>
				<view class="tr flex_center" v-for="(item,index) in list" :key="index">
					<view class="flex_r_around border">
						<image :src="item.avatar" mode="aspectFill"></image>
					</view>
					<view class="hidden border">{{item.exposure_num}}</view>
					<view class="hidden border">{{item.order_num}}</view>
					<view class="hidden">{{
						item.recShow == 0 || item.recShow == 1 ? '正在推广中' : item.brokerage
					}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from '@//compentents/navBar/navBar.vue'
	export default {
		components: {
			navBar,
		},
		data() {
			return {
				id: 0,

				list: [],
				page: 1,
				total: 0,
			}
		},
		methods: {
			getList() {
				this.$get('/popularize/getSellGoodsEredar', {
					page: this.page,
					id: this.id,
				}).then(res => {
					this.total = res.data.total;
					this.list.push(...res.data.data);
				})
			},
		},

		onLoad(option) {
			this.id = option.id;
			this.getList();
		}
	}
</script>

<style scoped lang="less">
	.detail {
		background: #FFF;
		min-height: 100vh;
		padding: 32rpx;
	}

	.content {
		.table {
			border-radius: 16rpx;
			overflow: hidden;
			border: 2rpx solid #EDEDED;

			.th {
				border-bottom: 2rpx solid #EDEDED;

				view {
					width: 33.33%;
					background: #FFEAEE;
					font-size: 28rpx;
					color: #131313;
					height: 64rpx;
					text-align: center;
					line-height: 64rpx;
				}
			}

			.border {
				border-right: 2rpx solid #EDEDED;
			}

			.tr {
				border-bottom: 2rpx solid #EDEDED;

				view {
					background: #FFF;
					height: 96rpx;
					width: 33.33%;
					font-weight: 500;
					font-size: 28rpx;
					color: #131313;
					line-height: 96rpx;
					text-align: center;

					image {
						width: 64rpx;
						height: 64rpx;
						border-radius: 32rpx;
					}
				}
			}
		}
	}
</style>